1 00:00:00,720 --> 00:00:01,730 Hello and welcome. 2 00:00:01,740 --> 00:00:08,310 In this lecture we are going to create functionality for our projet. 3 00:00:10,920 --> 00:00:12,150 To save time. 4 00:00:12,150 --> 00:00:14,630 I've already written the code. 5 00:00:14,940 --> 00:00:18,540 Ah just run through the code line by line. 6 00:00:18,970 --> 00:00:28,170 And one of the code is the doctype the doc type basically is a declaration to notify the web browsers 7 00:00:29,310 --> 00:00:37,080 that the document that is about to be displayed on the content of the documents is an hastier mail five 8 00:00:37,080 --> 00:00:43,070 document the actual hate mail start from line to and ends on line 19. 9 00:00:43,440 --> 00:00:45,400 There is some indentation. 10 00:00:45,410 --> 00:00:53,850 So looking at the indentation you can tell that the head tag which is online in 3 to 5 is a child of 11 00:00:53,850 --> 00:00:54,790 the haysi Male. 12 00:00:54,800 --> 00:01:05,030 Also the body tag which is from Line 6 to line 18 is a child of the hastier male tag. 13 00:01:05,250 --> 00:01:16,680 They title tag online for is child to the head tag while the head behaves one tag online day each one 14 00:01:17,160 --> 00:01:19,340 is a chart of the body. 15 00:01:19,650 --> 00:01:26,470 I have attached an attribute to the hate wan tag on line 7. 16 00:01:26,640 --> 00:01:35,950 The attribute is and is this style when you are playing Sear's says in line you apply it as an attribute 17 00:01:35,950 --> 00:01:42,300 this style becomes an attribute and the value is of value you will specify for your success. 18 00:01:42,300 --> 00:01:50,820 So I specified a text a line to be sentence that wanted text for the title this title here in white. 19 00:01:50,820 --> 00:01:52,380 I want it to be centred. 20 00:01:52,380 --> 00:02:01,040 That's what line 7 is saying and you can see the opening tag and the closing tag here on line. 21 00:02:01,080 --> 00:02:05,430 This line here so every tab should have an opening and closing. 22 00:02:05,520 --> 00:02:13,010 You can tell the close in by the forward slash before the element is closed on line 7. 23 00:02:13,010 --> 00:02:15,580 We've got the image. 24 00:02:15,730 --> 00:02:23,790 I got it image tag I'll give it an idea of who I'd Bob k. 25 00:02:23,910 --> 00:02:26,370 We've attached an on Click event. 26 00:02:26,370 --> 00:02:29,370 This is what we'll use to switch between the light. 27 00:02:29,390 --> 00:02:37,230 Bob's this on click so on quick once you click on it it would trigger off a function called Bob's which 28 00:02:37,500 --> 00:02:41,830 we have defined down here are like functions in a minute. 29 00:02:41,940 --> 00:02:45,510 So line Kate the image tag. 30 00:02:45,570 --> 00:02:46,900 Got an idea. 31 00:02:47,000 --> 00:02:47,960 Like. 32 00:02:48,210 --> 00:02:57,060 And there is an OK quick event has been attached to it and I've set it to equals tool Bob's Suite which 33 00:02:57,060 --> 00:03:00,690 is defined below in the script. 34 00:03:00,690 --> 00:03:08,250 So when the block when the Bob is clicked it will call this function I have defined here and it all. 35 00:03:08,250 --> 00:03:13,240 Pass this source here equals to this light off the light off. 36 00:03:13,280 --> 00:03:14,540 Is this image here. 37 00:03:14,660 --> 00:03:20,310 Will not be like box when he's off and giving it a we've made it. 38 00:03:20,310 --> 00:03:24,970 These are the types some styling to the like Bob. 39 00:03:27,170 --> 00:03:38,900 So giving it a height cause I saw a value giving it with height and the margin as well giving in margin 40 00:03:38,900 --> 00:03:47,900 from left to move 350 pigs 320 pig saws margin from the top 50 pixels. 41 00:03:48,050 --> 00:03:53,490 So that's the hastier male singer says out of the way. 42 00:03:53,520 --> 00:04:00,690 Now this song chant We are attached to this in this on click here is like Bob. 43 00:04:00,690 --> 00:04:04,410 This is where we describe the function in between discreate tack. 44 00:04:04,570 --> 00:04:12,590 All right so I could have easily put this on an external script but just because it's not a very big 45 00:04:12,590 --> 00:04:13,120 function. 46 00:04:13,130 --> 00:04:20,080 I decided to leave it on the same document is good practice it's always separate your -- jazz groups 47 00:04:20,110 --> 00:04:26,390 he says he and his team and the into separate files because this is his very smart projet have decided 48 00:04:26,390 --> 00:04:30,230 to leave it on the same page the same document. 49 00:04:30,560 --> 00:04:33,220 So to create information online. 50 00:04:33,300 --> 00:04:39,380 You type in the word function followed by space and then the name you want to call the function. 51 00:04:39,380 --> 00:04:47,660 In this case I call the function Bob switch where you define it from choice you have to enclose parentheses 52 00:04:48,140 --> 00:04:54,480 in case you have any arguments to pass inside that and then you have the curly braces the opening. 53 00:04:54,490 --> 00:05:02,450 And they close in between the calibrators is where you you attach the things you want the function to 54 00:05:02,450 --> 00:05:04,550 do when the function is called 55 00:05:07,130 --> 00:05:13,410 Line 11 I've defined a variable called Bob and I have set it to equal. 56 00:05:13,430 --> 00:05:22,380 So documents get elemen by an idea and the idea is like Bob this here which is this image here. 57 00:05:22,430 --> 00:05:24,330 So that's the idea talking about. 58 00:05:24,530 --> 00:05:26,830 So it will grab this image here. 59 00:05:26,960 --> 00:05:28,380 That's what this light piece. 60 00:05:28,580 --> 00:05:38,000 And then attached a conditional statement on line 12 seeing if the Bob this source of the Bob matches 61 00:05:38,050 --> 00:05:43,900 this light on I'll quote one unquote only missed call light on what is sin here. 62 00:05:43,950 --> 00:05:56,150 If this source matches the light on four matches this light on image here then the Bob dot source gives 63 00:05:56,150 --> 00:05:57,260 you this. 64 00:05:57,260 --> 00:06:03,230 So if he might is that display this one that's you know that's what he's saying else. 65 00:06:03,320 --> 00:06:07,220 If it doesn't match that then display this. 66 00:06:07,220 --> 00:06:14,330 So this is how this switch is so if it's if this matches one display the earlier the other one matches 67 00:06:14,330 --> 00:06:16,670 the display the other and that's what he's saying. 68 00:06:16,760 --> 00:06:26,670 If this matches this image right on display this image light off doesn't match dent display the image 69 00:06:26,910 --> 00:06:28,150 light off. 70 00:06:28,170 --> 00:06:30,500 That's basically what the script is saying. 71 00:06:30,800 --> 00:06:36,310 So I just save the document and then let's view our project. 72 00:06:36,350 --> 00:06:43,480 So this is what our project looks like you saw were saying the moment if the image matches this then 73 00:06:43,720 --> 00:06:46,770 if we click it will give us that image source. 74 00:06:46,800 --> 00:06:52,580 So he always reverses the images on the click click on that and gives me the other one click gives me 75 00:06:52,580 --> 00:06:57,230 the other so that's it for list projet Thanks for watching. 76 00:06:57,300 --> 00:07:02,020 There's any aspect you tonight understand please feel free to let me know. 77 00:07:02,030 --> 00:07:02,680 Thanks. 78 00:07:02,680 --> 00:07:03,350 Bye for now.